<template>
	<view class="app">
		<u-form :model="data.formData" ref="form1">
			<u-form-item label="姓名" prop="name"><u-input v-model="data.formData.name" /></u-form-item>
			<u-form-item label="简介" prop="intro"><u-input v-model="data.formData.intro" /></u-form-item>
		</u-form>
    recordState.projectDailyData{{ recordState.projectDailyData }}
    <u-form :model="recordState.projectDailyData" ref="form2" :borderBottom="false">
    <view class="project-daily-item" :class="{ 'bottom-border': recordState.projectDailyData.length > 1 }"
            v-for="(item, index) in recordState.projectDailyData" :key="index">
            <view class="daily-father-project">
              <view class="daily-title">项目{{ index + 1 }}</view>
            </view>

              <u-form-item label-position="top" label="项目名称或代号" :borderBottom="false">
                <u-input border="true" v-model:modelValue="item.projectName" class="input-disabled"></u-input>
              </u-form-item>
              <u-form-item label-position="top" label="工时"   prop="workingHours">
                <u-input border="true" placeholder="请输入工时" v-model:modelValue="item.workingHours"></u-input>
              </u-form-item>
            
          </view>
        </u-form>


        <view class="task-daily">
          <u-form :model="item" ref="taskDailyRef">
            <view class="task-daily-item" :class="{ 'bottom-border': recordState.taskDailyData.length > 1 }"
              v-for="(item, index) in recordState.taskDailyData" :key="index">
              <view class="daily-father-task">
                <view class="daily-title">任务{{ index + 1 }}</view>
              </view>

              <u-form-item label-position="top" label="项目名称或代号">
                <u-input border="true" v-model:modelValue="item.projectName" class="input-disabled"></u-input>
              </u-form-item>
              <u-form-item label-position="top" label="项目阶段">
                <u-input border="true" v-model:modelValue="item.milepostName" class="input-disabled"></u-input>
              </u-form-item>
              <u-form-item label-position="top" label="任务">
                <u-input border="true" v-model:modelValue="item.taskName" class="input-disabled"></u-input>
              </u-form-item>
              <u-form-item label-position="top" label="工时" prop="workingHours">
                <u-input border="true" placeholder="请输入工时" v-model:modelValue="item.workingHours"></u-input>
              </u-form-item>
              <u-form-item label-position="top" label="是否有风险" :prop="[index, 'risk']">
                <u-radio-group v-model="item.risk" @change="radioGroupChange">
                  <u-radio v-for="(item, index) in recordState.riskList" :key="index" :name="item.name"
                    :disabled="item.disabled">
                    {{ item.name }}
                  </u-radio>
                </u-radio-group>
              </u-form-item>
              <u-form-item label-position="top" label="风险描述" :prop="[index, 'riskDescription']"
                v-if="item.risk === '是'">
                <u-input border="true" placeholder="请输入风险描述" v-model:modelValue="item.riskDescription"></u-input>
              </u-form-item>
              <u-form-item label-position="top" label="解决方案" :prop="[index, 'solution']" v-if="item.risk === '是'">
                <u-input border="true" placeholder="请输入解决方案" v-model:modelValue="item.solution"></u-input>
              </u-form-item>

            </view>
          </u-form>
        </view>

		<!-- <u-button @click="submit">提交</u-button> -->
      {{recordState.projectDailyData}}
       

	</view>
</template>

<script setup>
	import { ref, reactive, onMounted, unref, computed, watch } from 'vue';
	import { onLoad, onReady } from '@dcloudio/uni-app';
import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';

	const form1 = ref();
	const form2 = ref(null);
	const taskDailyRef = ref(null);
	const data = reactive({
		formData: {
			name: "",
			intro: ""
		},
		rules: {
			name: [{
				required: true,
				message: '请输入姓名',
				// 可以单个或者同时写两个触发验证方式 
				trigger: ['change', 'blur'],
			}],
			intro: [{
				min: 5,
				message: '简介不能少于5个字',
				trigger: 'change'
			}],
      workingHours: [
    {
      required: true,
      validator: validateWorkingHours,
      trigger: 'blur',
    },
  ],
		}
	});
  function validateWorkingHours(rule, value, callback) {
  console.log(value, 'ads');
  if (!/^(0(\.5)?|[1-7](\.0|\.5)?|8(\.0)?)$/.test(value)) {
    callback(new Error('请输入有效的工时(支持0.5的数字)'));
  } else {
    callback();
  }
}
  const recordState = reactive({
    current:1,
    projectDailyData:[],
    riskList: [
    {
      name: '是',
    },
    {
      name: '否',
    },
  ],
  })
  function getDailyData() {
  post('/solution-ppm/api/v2/built-in-system-ppm/daily_report/for_create', {
    dailyDate: '2024-04-24',
  }).then((data) => {
    if (data.code === 200) {
      recordState.projectDailyData = data.data.projectList;
      recordState.taskDailyData = data.data.taskList;
    }
  });
}
getDailyData()
	onReady(() => {
		form1.value.setRules(data.rules);
		form2.value.setRules(data.rules);
		taskDailyRef.value.setRules(data.rules);
	
		// form1.value.setRules(data.rules);
	});

	const submit = (e) => {
		form1.value.validate(valid => {
			if (valid) {
				uni.showToast({
					title: "验证通过",
					icon: 'none'
				});
				console.log('验证通过');
			} else {
				console.log('验证失败');
			}
		});
	}


//   watch(
//   () => recordState.projectDailyData,
//   () => {
//     if (recordState.projectDailyData.length>0) {
//       console.log(form2,'asdadsass')
//       console.log(recordState.projectDailyData,'asdadsass')
//       setTimeout(()=>{
//         form2.value.setRules(data.rules);

//         console.log(form2,'阿莎毒杀')
//       },1000)
//     }
//   }
// )
</script>


<style>
/*
新建日报
*/
.daily-title {
  font-family: PingFangSC-Semibold;
  font-size: 14px;
  color: #262626;
  letter-spacing: 0;
  font-weight: 600;
  height: 17px;
  line-height: 17px;
  margin-left: 8px;
}

.daily-father-project {
  position: relative;
  height: 17px;
  border-left: 4px solid #ff9846;
}

.daily-father-task {
  position: relative;
  height: 17px;
  border-left: 4px solid #3875ff;
}

.input-disabled {
  pointer-events: none;
  /* 阻止元素接收鼠标事件 */
}

.task-daily-item {
  margin-top: 16px;
}

.project-daily-item {
  margin-top: 16px;
}

.bottom-border {
  border-bottom: 1px solid #d9d9d9;
}

:deep(.u-form-item) {
  padding: 0;
}

.custom-tabs {
  background-color: #3673c9;
  display: flex;
  position: relative;
}

.custom-tab {
  flex: 1;
  text-align: center;
  cursor: pointer;
  padding: 10px;
  background-color: transparent;
  position: relative;
  color: #ffffff;
  font-size: 16px;
  transition: border-color 0.6s;
  text-align: center;
  height: 50px;
  line-height: 20px;
}

.border-middle {
  width: 1px;
  height: 23px;
  position: absolute;
  border: 1px solid #729fd8;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.custom-tab.active {
  background-color: transparent;

  font-size: 16px;
  color: #ffffff;
  letter-spacing: 0;
  text-align: center;
  font-weight: 600;
}
</style>